<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: 3px solid;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="a b">1</li>
      <li class="a">2</li>
      <li class="a">3</li>
      <li class="b">4</li>
    </ul>
    <script>
      /*
            1. 符合某个特征后再执行
            2. 目标对象的一切都可以成为特征
        */
      document.onclick = function (e) {
        // if (e.target.nodeName === "LI") {
        if (e.target.classList.contains("a")) {
          console.log(1);
        }
        if (e.target.classList.contains("b")) {
          console.log(2);
        }
      };
    </script>
  </body>
</html>
